<template>
  <div class="wrapper">
    <div id="map"></div>
    <!-- <canvas id="canvas"></canvas> -->
  </div>
</template>

<script>
import BMap from "BMap";
var mapv = require("mapv");
export default {
  name: "dot1",
  components: {},
  props: {},
  data() {
    return {};
  },
  watch: {},
  computed: {},
  methods: {
    init() {
      // 百度地图API功能
      var map = new BMap.Map("map", {
        enableMapClick: false
      }); // 创建Map实例
      map.centerAndZoom(new BMap.Point(105.403119, 38.028658), 5); // 初始化地图,设置中心点坐标和地图级别
      map.enableScrollWheelZoom(true); // 开启鼠标滚轮缩放

      /*
        map.setMapStyle({
            style: 'light'
        });
        */

      var data = [
        {
          geometry: {
            type: "Point",
            coordinates: [116.2806, 32.165]
          },
          count: 70
        }
      ];

      var dataSet = new mapv.DataSet(data);

      console.log(dataSet, "q");

      var options = {
        fillStyle: "rgba(255, 50, 50, 0.6)",
        shadowColor: "rgba(255, 50, 50, 1)",
        shadowBlur: 30,
        globalCompositeOperation: "lighter",
        methods: {
          click: function(item) {
            console.log(item);
          }
        },
        size: 5,
        // updateImmediate: true,
        draw: "simple"
      };

      new mapv.baiduMapLayer(map, dataSet, options);

      dataSet.on("change", change => {
        console.log("小老弟怎么费事");
        console.log(change, "sfs");
      });
      dataSet.on("jie", () => {
        console.log("杰哥真牛逼！");
      });
      dataSet._trigger('jie')
      dataSet.set([
        {
          geometry: {
            type: "Point",
            coordinates: [125, 23]
          },
          fillStyle: "red",
          size: 30
        },
        {
          geometry: {
            type: "Point",
            coordinates: [125, 23]
          },
          fillStyle: "red",
          size: 3
        }
      ]);

      // dataSet.set(data); // 修改数据

      // mapvLayer.show(); // 显示图层
      // mapvLayer.hide(); // 删除图层
    }
  },
  created() {},
  mounted() {
    this.init();
  }
};
</script>
<style lang="scss" scoped>
.wrapper {
  height: 100vh;
  width: 100vw;
  #map {
    width: 100%;
    height: 100%;
  }
}
</style>
